<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>修改头像</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${ctx}/resources/layuimini/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctx}/resources/layuimini/css/public.css" media="all">
    <style>
        .layui-form-item .layui-input-company {width: auto;padding-right: 10px;line-height: 38px;}
    </style>
</head>
<body>
<div style="margin: 20px" class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="uploadUserImg">上传头像</button>
            <div class="layui-upload-list">
                <img class="layui-upload-img"  width="200" height="200" id="userImg">
                <p id="userImgText"></p>
            </div>
        </div>
    </div>
</div>
<script src="${ctx}/resources/layuimini/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="${ctx}/resources/layuimini/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['form','miniTab','jquery','upload'], function () {
        var form = layui.form,
            layer = layui.layer,
            $=layui.jquery,
            upload=layui.upload,
            miniTab = layui.miniTab;
//常规使用 - 普通图片上传
        var uploadInst = upload.render({
            elem: '#uploadUserImg'
            ,url: '${ctx}/upload/uploadUserImg.action' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            ,field:"mf"//设置文件域名
            ,acceptMime:'image/*'// 规定打开文件选择框时，筛选出的文件类型，值为用逗号隔开的 MIME 类型列表。
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#userImg').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code == -1){
                    return layer.msg('上传失败');
                }else{
                    console.log(res);
                    let main_user_img= window.parent.document.getElementById("main_user_img");
                    main_user_img.src="${ctx}/download/loadImag.action?path="+res.data;
                    return layer.msg("图片修改成功");
                }
                $('#userImgText').html(''); //置空上传失败的状态
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var userImgText = $('#userImgText');
                userImgText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                userImgText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });
    });
</script>
</body>
</html>
